<template>
  <!--布尔选择-->
  <div class="input-ifElse-box">
    <div class="input-ifElse-title">
      <p v-text="title"></p>
    </div>
    <div style="width: 70%;">
      <div class="input-ifElse">
        <div
          @click="readOnly ? null: yesNoFuc(0)"
          class="input-ifElse-no"
          id="input-ifElse-no"
          ref="no"
          v-text="falseKey"></div>
        <div
          @click="readOnly ? null: yesNoFuc(1)"
          class="input-ifElse-yes"
          id="input-ifElse-yes"
          ref="yes"
          v-text="trueKey"></div>
        <div class="yes-no" id="yes-no" ref="yesNo">
          <span id="yes-no-content" ref="yesNoContent" v-text="falseKey"></span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
    export default {
        props: {
            value: {
                type: Number,
                default: () => 1
            },
            title: {
                type: String,
                default: () => "布尔选择"
            },
            trueKey:{
                type: String,
                default: () => "是"
            },
            falseKey:{
                type: String,
                default: () => "否"
            },
            readOnly:{
                type: Boolean,
                default: () => false
            },
        },
        mounted() {
            this.move(this.value)
        },
        methods: {
            yesNoFuc(res) {
                this.move(res)
                this.$emit("change")
            },
            move(res) {
              this.$refs.yesNo.style.transform = `translateX(${res==1?100:0}%)`
              if(res === 1) {
                this.$refs.yesNoContent.innerHTML = this.trueKey
              } else {
                this.$refs.yesNoContent.innerHTML = this.falseKey
              }
              
              this.$emit("input", res);
            }
        }
    }
</script>

<style scoped>
  .input-ifElse-box {
    width: 100%;
    height: 30px;
    margin: 15px auto;
    overflow: hidden;
  }
  .input-ifElse-title {
    cursor: default;
    float: left;
    width: 20%;
    height: 100%;
    line-height: 30px;
    /* font-size: 14px; */
    letter-spacing: 1.5px;
  }
  .input-ifElse-title p {
    width: 100%;
    margin: 0 0;
    text-align: center;
    color: rgba(255, 255, 255,0.5);
  }
  .input-ifElse {
    user-select:none;
    float: left;
    position: relative;
    width: 50%;
    height: 25px;
    margin-top: 1.5px;
    border: 1px solid #2b313e;
    border-radius: 3px;
    background-color: #222833; /*背景颜色*/
  }

  .yes-no {
    float: left;
    width: 50%;
    height: 25px;
    line-height: 25px;
    text-align: center;
    font-size: 12px;
    color: rgba(255, 255, 255,0.5);
    border-radius: 2px;
    background-color: rgb(26, 35, 50);
    position: absolute;
    top: 0;
    left: 0;
    transition: 0.3s;
  }
  .yes-no > span {
    transition: 0s;
  }

  .input-ifElse-no,.input-ifElse-yes {
    cursor: pointer;
    float: left;
    width: 50%;
    height: 25px;
    line-height: 25px;
    text-align: center;
    font-size: 12px;
    color: rgba(255, 255, 255,0.2);
  }
  .input-ifElse-no:hover, .input-ifElse-yes:hover {
    color: rgba(255, 255, 255,0.6);
  }
</style>
